<template>
  <div class="event-box">
    <cardPanel title="网格事件">
      <div class="event-content">
        <div ref="eventDom" class="event-chart"></div>
        <div class="event-head">
          <span>事件上报</span>
        </div>
        <ul class="event-body">
          <li v-for="(item, index) in listData" :key="index">
            <div class="event-item-head">
              <span>{{ item.time }}</span>
              <p>{{ item.type }}</p>
            </div>
            <div class="event-item-content">{{ item.content }}</div>
          </li>
        </ul>
      </div>
    </cardPanel>
  </div>
</template>

<script setup lang="ts">
// 网格事件
import { ref, onMounted } from "vue";
import cardPanel from "@/components/cardPanel/index.vue";
import * as echarts from "echarts";

const eventDom: any = ref();

const initChart = () => {
  const chart = echarts.init(eventDom.value);
  var img =
    "";

  var trafficWay = [
    {
      name: "家庭纠纷",
      value: 20,
    },
    {
      name: "不服调解",
      value: 10,
    },
    {
      name: "不满判决",
      value: 30,
    },
    {
      name: "土地纠纷",
      value: 40,
    },
    {
      name: "经济纠纷",
      value: 25,
    },
    {
      name: "邻里纠纷",
      value: 15,
    },
  ];

  var data = [];
  var color = [
    "#00ffff",
    "#00cfff",
    "#006ced",
    "#ffe000",
    "#ffa800",
    "#ff5b00",
    "#ff3000",
  ];
  for (var i = 0; i < trafficWay.length; i++) {
    data.push(
      {
        value: trafficWay[i].value,
        name: trafficWay[i].name,
        itemStyle: {
          normal: {
            borderWidth: 5,
            shadowBlur: 10,
            borderColor: color[i],
            shadowColor: color[i],
          },
        },
      },
      {
        value: 2,
        name: "",
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            color: "rgba(0, 0, 0, 0)",
            borderColor: "rgba(0, 0, 0, 0)",
            borderWidth: 0,
          },
        },
      }
    );
  }
  var seriesOption = [
    {
      name: "",
      type: "pie",
      clockWise: false,
      radius: ["70%", "80%"],
      hoverAnimation: false,
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: "outside",
            color: "#ddd",
            padding: [0, -100],
            formatter: function (params: any) {
              var percent = 0;
              var total = 0;
              for (var i = 0; i < trafficWay.length; i++) {
                total += trafficWay[i].value;
              }
              percent = Number(((params.value / total) * 100).toFixed(0));
              if (params.name !== "") {
                return params.name + percent + "%";
              } else {
                return "";
              }
            },
          },
          labelLine: {
            length: 30,
            length2: 100,
            show: true,
            color: "#00ffff",
          },
          labelLayout: {
            verticalAlign: "bottom",
            dy: 10,
          },
        },
      },
      data: data,
    },
  ];
  const option = {
    color: color,
    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            image: img,
            width: 120,
            height: 120,
          },
          left: "center",
          top: "center",
          position: [100, 100],
        },
      ],
    },
    tooltip: {
      show: false,
    },
    toolbox: {
      show: false,
    },
    series: seriesOption,
  };
  chart.setOption(option);
};

const listData = [
  {
    time: "2022-10-20 09: 15: 32",
    type: "帮助老人",
    content:
      "网格员在日常巡查时发现市场门前空地有人私自焚烧枯叶杂草，由于燃烧面积较大，周围全都是易燃的干草和树枝，为防止火势继续蔓延，网格员立即联系辖区联防队展开救火行动，经网格员和联防队员通力合作后，火势迅速被扑灭，未造成人员伤亡。",
  },
  {
    time: "2022-10-21 09: 15: 32",
    type: "消防安全",
    content:
      "网格员在日常巡查时发现市场门前空地有人私自焚烧枯叶杂草，由于燃烧面积较大，周围全都是易燃的干草和树枝，为防止火势继续蔓延，网格员立即联系辖区联防队展开救火行动，经网格员和联防队员通力合作后，火势迅速被扑灭，未造成人员伤亡。",
  },
  {
    time: "2022-10-22 09: 15: 32",
    type: "文明养宠",
    content:
      "网格员XX在网格内开展节后治安隐患排查工作，走访至北街时发现一位衣服、裤子全是泥巴的老人提着一袋蔬菜，神色慌张的在建平门附近蹒跚踱步。XX立即上前向老人介绍自己是网格员，并询问老人是否遇到困难需要帮助。",
  },
  {
    time: "2022-10-23 09: 15: 32",
    type: "家庭矛盾",
    content:
      "有居民夫妇前来向网格员寻求帮助，因相处不融洽，长期争吵夫妻矛盾加剧，希望网格员能从中调解，网格员在细心聆听双方争吵的原因后，耐心劝解并安抚夫妻双方情绪，先初步缓解了双方的情绪，建议夫妻双方冷静后再进行二次调解。",
  },
  {
    time: "2022-10-24 09: 15: 32",
    type: "噪音问题",
    content:
      "小区租客通过电话向网格员反映楼层噪音问题，表示近一个多月来有人一直半夜弹琴，产生的噪音严重影响其正常休息，给日常生活带来困扰。接到居民反映后，网格员及时上门向诉求人了解情况，了解清楚后，网格当晚通过摸排锁定了噪音来源，入户经过耐心调解，传达邻居意见，建议其噪音减少到最低限度，尽量不影响周边邻居的正常休息，正确引导被投诉人换位思考，经过调解协商，被投诉人意识到自己的错误，表示以后不会再发生噪音扰民问题。",
  },
];

onMounted(() => {
  initChart();
});
</script>

<style lang="scss" scoped>
.event-box {
  width: 360px;
  height: 520px;
  margin-bottom: 10px;
}
.event-content {
  height: 100%;
}
.event-chart {
  width: 100%;
  height: 200px;
}
.event-head {
  position: relative;
  background: url("../../../assets/image/network/title-bg.png") no-repeat 0 0;
  background-size: 100% 100%;
  height: 14px;
  width: 100%;
  span {
    position: absolute;
    top: -100%;
    left: 5px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(0deg, #46ebff, #ffe9ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.event-body {
  height: calc(100% - 230px);
  overflow-y: auto;
  margin-top: 10px;
  li {
    height: 100px;
  }
}
.event-item-head {
  height: 30px;
  background: linear-gradient(90deg, #31e9ff1a, #31e9ff96 49%, #31e9ff1a);
  display: flex;
  align-items: center;
  padding-left: 8px;
  justify-content: space-between;
  box-sizing: border-box;
  p {
    font-family: Alibaba PuHuiTi, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #ff9407;
  }
}
.event-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>
